<template>
  <div class="ui-shade">
    <div class="imgsbox" @mouseup="scroll" >
      <div class="img_item" v-for="imgsrc in imglist">
        <img :src="imgsrc" alt="">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imglist: [
          'http://p1.music.126.net/gWTBbLJfla0LT74mwDildA==/109951165477221000.jpg?imageView&quality=89',
          'http://p1.music.126.net/EZCbqP87wGuZ5XcECFRqxg==/109951165477895371.jpg?imageView&quality=89',
          'http://p1.music.126.net/H6sKYEA8-xhhBb8yRkcioA==/109951165477267723.jpg?imageView&quality=89'
        ],
      }
    },
    created() {
    },
    methods: {
      scroll(e) {
        let n = Math.floor(e.target.scrollLeft / 320);
        console.log(e)
        // clearTimeout(scrolltime);
        // let scrolltime = setTimeout(function() {
        //   e.target.scrollTo(320 * n, 0);
        //   return;
        // }, 1000)
      }
    }
  }
</script>

<style scoped>
  .imgsbox {
    width: 100%;
    font-size: 0;
    white-space: nowrap;
    overflow: scroll;
    font-size: 0;
  }

  .img_item {
    width: 100%;
    padding: 0 .5rem;
    display: inline-block;
  }

  .img_item img {
    width: 100%;
  }
</style>
